<template>
  <div class="nav">
    <div class="top">
      <span class="title">整卷评分模式</span>
    </div>
    <div class="content">
      <div class="header">
        <div style="margin-bottom: 5px"><span>答题人：{{$route.query.row.name}}</span></div>
        <div style="margin-bottom: 5px"><span style="margin-right: 30px">开始时间：{{$route.query.row.starttime}}</span><span>结束时间：{{$route.query.row.endtime}}</span></div>
        <div><span>答题时长：{{$route.query.row.longtime}}</span></div>
        <div class="score"><span style="color:indianred; font-size: 50px;margin-right: 5px">{{score}}</span>分</div>
      </div>
      <div class="left">
        <span style="border-left: 3px solid #87a6cd;padding-left: 10px">答题详情</span>
        <div v-for="(item,index) in this.getContent.content.currentExam" :key=index class="exam">
          <div class="ques">
            <span style="margin-right: 10px" >{{index+1}}</span>
            <span v-if="item.questioncontent !== null">{{item.questioncontent}}</span>
            <span v-else>{{item.stuinfo}}</span>
            <span style="color: darkgrey" v-if="item.questioncontent !== null">（最高分：{{item.score}}分）</span>
            <span style="float: right;font-size: 14px" v-if="item.questioncontent !== null">得<el-input @change="totalscore()" v-model="item.analysis"></el-input>分</span>
          </div>
          <div v-if="item.questiontype === 1||item.questiontype === 3">
            <div class="opt" v-for="(ite,ind) in item.answer" :key="ind">
              <el-radio-group v-model="item.images">
                <el-radio  disabled :label="ind">
                  <span>{{ite.answer}}</span>
                </el-radio>
              </el-radio-group>
            </div>
          </div>
          <div v-if="item.questiontype === 2">
            <div class="opt" v-for="(ite,ind) in item.answer" :key="ind">
              <el-checkbox disabled v-model="ite.preview" :label="ind">
                <span>{{ite.answer}}</span>
              </el-checkbox>
            </div>
          </div>
          <div v-if="item.questiontype === 4">
            <div class="opt" v-for="(ite,ind) in item.answer" :key="ind">
              <el-input disabled v-model="item.images" style="width: 700px"></el-input>
            </div>
          </div>
          <div v-if="item.questiontype === 5">
            <div v-if="item.stuinfo ==='性别'">
              <el-radio-group style="padding: 7px 0" v-model="item.images">
                <el-radio disabled label="男">
                  <span>男</span>
                </el-radio>
                <el-radio disabled label="女">
                  <span>女</span>
                </el-radio>
              </el-radio-group>
            </div>
            <div v-else>
              <div class="opt" >
                <el-input disabled v-model="item.images" style="width: 700px"></el-input>
              </div>
            </div>
          </div>
          <div v-if="item.questiontype === 6">
            <div class="opt" >
              <el-input disabled style="width: 700px" type="textarea" :autosize="{ minRows: 4, maxRows: 6}" v-model="item.images"></el-input>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <el-button plain class="stop" @click="stopRead">结束阅卷</el-button>
        <el-button-group class="btn">
          <el-button plain size="medium" icon="el-icon-arrow-left" style="background-color: RGB(135,166,205); color: RGB(255,255,255)" @click="prenext">上一份答卷</el-button>
          <el-button plain size="medium" style="background-color: RGB(135,166,205); color: RGB(255,255,255)" @click="xnext">下一份答卷<i class="el-icon-arrow-right el-icon--right"></i></el-button>
        </el-button-group>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "JudgeScore",
  data(){
    return{
      content: '',
      answerList:'',
      input: '',
      list:'',
      score:0,
      OneScore:'',
      tableData:''
    }
  },
  created(){
    this.getAnswer();
  },
  mounted(){
    // this.getAnswer();
    this.getAnswerScore();
  },
  methods: {
    totalscore(){
      this.score=0
      for(let i in this.getContent.content.currentExam){
        this.score+=parseInt(this.getContent.content.currentExam[i].analysis)
      }
    },
    getAnswer(){
      var num = this.$route.query.ha
      // var list;
      this.$axios.get('exam/userAnswer',{
        params:{
          recordid: num
        }
      }).then(res => {
        console.log("***********")
        console.log(res)
        console.log("***********")
        this.answerList  = res.data.useranswer.split(";");
        console.log(this.answerList);
        this.OneScore = res.data.score.split(",");
        this.score = 0;
        for(var i in this.getContent.content.currentExam){
          this.getContent.content.currentExam[i].analysis = parseInt(this.OneScore[i]);
          this.score+=parseInt(this.getContent.content.currentExam[i].analysis);
          if(this.getContent.content.currentExam[i].questiontype === 1){
            this.getContent.content.currentExam[i].images = parseInt(this.answerList[i]);
          } else if(this.getContent.content.currentExam[i].questiontype ===2){
            var mulList = this.answerList[i].split(",");
            for(let j in mulList){
              this.getContent.content.currentExam[i].answer[mulList[j]].preview = true;
            }
          }else if(this.getContent.content.currentExam[i].questiontype === 3){
            console.log(this.answerList[i]);
            var pd = this.answerList[i].split(",");
            console.log("-------")
            console.log(pd)
            console.log("-------")
            for(let j in pd){
              if(pd[j] === "True"){
                this.getContent.content.currentExam[i].images = parseInt(j);
              }
            }
          }else if(this.getContent.content.currentExam[i].questiontype === 4){
            this.getContent.content.currentExam[i].images = this.answerList[i];
          }else if(this.getContent.content.currentExam[i].questiontype === 5){
              this.getContent.content.currentExam[i].images = this.answerList[i];
          }else {
            this.getContent.content.currentExam[i].images = this.answerList[i];
          }
        }
      })
    },
    getAnswerScore(){
      console.log(this.getContent.content.currentExam);

    },
    // back(){
    //   console.log(this.getContent.content.currentExam);
    //
    // },

    stopRead(){
      this.sendScore();
      this.$router.push('/DataReport');
    },
    prenext(){
      this.sendScore();
      var ha
      for(var i in this.getNum.num){
        if(this.getNum.num[i] === parseInt(this.$route.query.ha)){
          var j = parseInt(i)-1;
          if(this.getNum.num[j] === undefined){
            ha = "no"
            this.$confirm('当前已经是第一份试卷啦！是否返回数据统计?', '提醒', {
              confirmButtonText: '返回数据统计',
              cancelButtonText: '留在当前试卷',
              type: 'info'
            }).then(() => {
              this.$router.push('/DataReport');
            }).catch(() => {
              this.$message({
                type: 'success',
                message: '回到当前试卷'
              });
            });
          }else{
            ha = this.getNum.num[j]
            var datadetail = this.getReport.reportDate.data.dataDetail[j];
          }
        }
      }
      if(ha !== "no"){
        this.$router.push({
          path: '/JudgeScore',
          query: {
            row: datadetail,
            ha:ha
          }
        })
        this.getAnswer();
      }
    },
    sendScore(){
      var scoreOne=0;
      for(let i in this.getContent.content.currentExam){
        scoreOne = scoreOne + ","+this.getContent.content.currentExam[i].analysis;
      }
      var num = this.$route.query.ha
      this.$axios.post('exam/updateScore', {
        recordid:num,
        totalscore: this.score,
        score: scoreOne.slice(2)
      }).then( res => {
      })
    },
    xnext(){
      this.sendScore();
      var ha;
      for(var i in this.getNum.num){
        if(this.getNum.num[i] === parseInt(this.$route.query.ha)){
          var j = parseInt(i)+1;
          if(this.getNum.num[j] === undefined){
            ha = "no"
            this.$confirm('当前已经是最后一份试卷啦！是否返回数据统计?', '提醒', {
              confirmButtonText: '返回数据统计',
              cancelButtonText: '留在当前试卷',
              type: 'info'
            }).then(() => {
              this.$router.push('/DataReport');
            }).catch(() => {
              this.$message({
                type: 'success',
                message: '回到当前试卷'
              });
            });
          }else{
            ha = this.getNum.num[j]
            var datadetail = this.getReport.reportDate.data.dataDetail[j];
          }
        }
      }
      if(ha !== "no"){
        this.$router.push({
          path: '/JudgeScore',
          query: {
            row: datadetail,
            ha:ha
          }
        })
        this.getAnswer();
      }
    }
  },
  computed: {
    getReport(){
      return this.$store.state.reportDate
    },
    getNum(){
      return this.$store.state.num
    },
    getContent(){
      return this.$store.state.content
    }
  },
  watch: {
    getReport(){
      this.tableData = this.$store.state.reportDate.reportDate.data.dataDetail
    },
  },

  // created() {
  //   localStorage.getItem("testMsg") && this.$store.replaceState(Object.assign(this.$store.state, JSON.parse(localStorage.getItem("testMsg"))));
  //   window.addEventListener("beforeunload", () => {
  //     localStorage.setItem("testMsg", JSON.stringify(this.$store.state))
  //   })
  // }


}
</script>

<style scoped>
.nav {
  position: relative;
  width: 100%;
  height: 750px;
  background-color: #ecebeb;
}
.nav .top {
  width: 100%;
  height: 200px;
  background-color: #87a6cd;
}
.nav .top .title {
  position: absolute;
  top: 30px;
  left: 210px;
  color: white;
  font-size: 20px;
}
/*.nav .top .stop {*/
  /*position: absolute;*/
  /*top: 30px;*/
  /*right: 250px;*/
/*}*/
.nav .content {
  position: absolute;
  top: 90px;
  left: 210px;
  width: 1100px;
  height: 650px;
  background-color: white;
  color: #707070;
}
.nav .content .header {
  position: relative;
  width: 1100px;
  height: 100px;
  padding: 10px 20px;
  border-bottom: 1px solid #ecebeb;
  box-sizing: border-box;
  font-size: 16px;
}
.nav .content .header .score {
  position: absolute;
  top: 30px;
  right: 80px;
  font-size: 18px;
}
.nav .content .left {
  float: left;
  width: 800px;
  height: 550px;
  padding: 20px 20px;
  border-right: 1px solid #ecebeb;
  box-sizing: border-box;
  overflow: scroll;
}

/*!* 定义滚动条样式 *!*/
/*::-webkit-scrollbar {*/
/*  width: 6px;*/
/*  height: 6px;*/
/*  background-color: rgba(240, 240, 240, 1);*/
/*}*/
/*!*定义滚动条轨道 内阴影+圆角*!*/
/*::-webkit-scrollbar-track {*/
/*  box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);*/
/*  border-radius: 10px;*/
/*  background-color: rgba(240, 240, 240, .5);*/
/*}*/
/*!*定义滑块 内阴影+圆角*!*/
/*::-webkit-scrollbar-thumb {*/
/*  border-radius: 10px;*/
/*  box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);*/
/*  background-color: rgba(240, 240, 240, .5);*/
/*}*/
.nav .content .left::-webkit-scrollbar{
  display: none;
}
.nav .content .left .exam {
  padding: 20px 20px;
  border-bottom: 1px solid #ecebeb;
}
.nav .content .left .exam .ques {
  color: #484848;
  margin-bottom: 20px;
}
.nav .content .left .exam .ques>>>.el-input{
  display: inline;
  margin: 0 5px;
}
.nav .content .left .exam .ques>>>.el-input__inner{
  height: 30px;
  width: 50px;
}
.nav .content .left .opt {
  width: 800px;
  margin: 10px 15px;
}

.nav .content .right {
  position: relative;
  float: left;
  width: 300px;
  height: 550px;
  box-sizing: border-box;
}
.nav .content .right .btn {
  position: absolute;
  left: 10px;
  bottom: 20px;
}
  .stop {
    position: absolute;
    top: 100px;
    right: 100px;
    background-color: RGB(135,166,205);
    color: RGB(255,255,255);
  }
</style>
